import React from 'react';
import {View} from 'react-native';
import {ButtonGroup} from 'react-native-elements';

class StationTab extends React.Component {
  state = {
    buttons: [],
    selectedIndex: 0,
  };

  componentDidMount(): void {
    this.props.upData(this.state.selectedIndex);
  }

  updateIndex = selectedIndex => {
    this.setState({selectedIndex});
    this.props.upData(selectedIndex);
  };

  render() {
    const {selectedIndex} = this.state;
    const buttons = this.props.data.map(item => {
      return item.name;
    });
    return (
      <View>
        <ButtonGroup
          textStyle={{color: '#53CAC4', fontSize: 15}}
          selectedTextStyle={{color: '#fff', fontWeight: 'bold'}}
          buttonStyle={{backgroundColor: 'transparent'}}
          selectedButtonStyle={{backgroundColor: '#53CAC4'}}
          onPress={this.updateIndex}
          selectedIndex={selectedIndex}
          buttons={buttons}
          containerStyle={{height: 34}}
        />
      </View>
    );
  }
}

export default StationTab;

